<template>
  <div id="container">
    <div id="mapDiv">
      <button class="btn btn-primary" id="addFeature" @click="addFeature">新增活动</button>
      <div id="propertyBox" v-show="IsShowPropertyBox" class="alert alert-light" style="width:500px;height:510px">
        <div class="form-group">
          <label for="activityName">活动名称</label>
          <input type="text" class="form-control" id="activityName" v-model="AddFeatureModel.activityName">
        </div>
        <div class="form-group">
          <label for="activityType">活动类别</label>
          <select class="form-control" id="activityType" v-model="AddFeatureModel.activityTypeName">
            <option>大型赛会</option>
            <option>应急救助</option>
            <option>社区建设</option>
            <option>扶贫开发</option>
            <option>海外服务</option>
          </select>
        </div>
        <div class="form-group">
          <label for="activityContent">活动详情</label>
          <input type="text" class="form-control" id="activityContent" v-model="AddFeatureModel.activityContent">
        </div>
        <div class="form-group">
          <label for="activityCompleteTime">活动结束时间</label>
          <input id="activityCompleteTime" class="form-control" type="text" v-model="AddFeatureModel.activityCompleteTime" aria-describedby="completeTimeHelp">
          <small id="completeTimeHelp" class="form-text text-muted">例如：2023/7/4 23:00:00</small>
        </div>
        <div class="form-group">
          <label for="PCASelect">请选择省市县</label>
          <v-distpicker :province="AddFeatureModel.province" :city="AddFeatureModel.city" :area="AddFeatureModel.area" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" id="PCASelect"></v-distpicker>
        </div>
        <div class="form-group">
          <label for="DetailAddress">详细地址</label>
          <input type="text" id="DetailAddress" v-model="AddFeatureModel.detailedAddress" class="form-control">
        </div>
        <button @click="addFeatureSubmit" class="btn btn-success">提交</button>
        <button @click="cancelAddFeature" class="btn btn-warning">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import SimpleRenderer from '@arcgis/core/renderers/SimpleRenderer.js'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol.js'
import PopupTemplate from '@arcgis/core/PopupTemplate.js'
import Graphic from '@arcgis/core/Graphic.js'
export default {
  data() {
    return {
      DMapView: undefined,
      Featurelayer: undefined,
      IsShowPropertyBox: false,
      AddFeatureModel: {
        activityName: '',
        activityContent:'',
        activityTypeName: '大型赛会',
        activityCompleteTime: '',
        organizationID: '',
        province: '',
        city: '',
        area: '',
        detailedAddress: ''
      },
      AddFeatureGeoModel: {
        mapPoint: undefined,
        AddFeatureClick: undefined
      }
    }
  },
  methods: {
    addFeature() {
      const cThis = this
      this.AddFeatureGeoModel.AddFeatureClick = this.DMapView.on('click', e => {
        cThis.ChangeDisplayPropertyBox()
        cThis.AddFeatureGeoModel.mapPoint = e.mapPoint
        console.log(e.mapPoint)
        this.axios.get(`https://apis.map.qq.com/ws/geocoder/v1/?location=${e.mapPoint.latitude},${e.mapPoint.longitude}&key=2EJBZ-HTQH4-PMXUU-K6H7S-RFJ3O-HEFET`).then(res => {
          const {result}=res.data
          this.AddFeatureModel.province = result.address_component.province
          this.AddFeatureModel.city = result.address_component.city
          this.AddFeatureModel.area = result.address_component.district
          this.AddFeatureModel.detailedAddress = result.address
        })
      })
    },
    ChangeDisplayPropertyBox() {
      this.IsShowPropertyBox = !this.IsShowPropertyBox
    },
    onChangeProvince(e) {
      this.AddFeatureModel.province = e.value
    },
    onChangeCity(e) {
      this.AddFeatureModel.city = e.value
    },
    onChangeArea(e) {
      this.AddFeatureModel.area = e.value
    },
    addFeatureSubmit() {
      this.AddFeatureModel.organizationID = JSON.parse(localStorage.getItem('Person')).organizationID
      this.axios.post('/SelectIdentity/Organization/CreateActivity', this.AddFeatureModel).then(res => {
        if (res.data) {
          let data = res.data
          const attributes = {}
          let org = JSON.parse(localStorage.getItem('Person'))
          attributes['VoluntaryActivityID'] = data.activityID
          attributes['VoluntaryName'] = data.activityName
          attributes['VoluntaryContent'] = data.voluntaryContent 
          attributes['OrganizationID'] = org.organizationID
          attributes['OrganizationName'] = org.organizationName
          const addFeature = new Graphic({
            geometry: this.AddFeatureGeoModel.mapPoint,
            attributes: attributes
          })
          this.Featurelayer.applyEdits({
            addFeatures: [addFeature]
          })
          this.ChangeDisplayPropertyBox()
          this.AddFeatureGeoModel.AddFeatureClick.remove()
          alert('添加志愿活动成功')
        }
      })
    },
    cancelAddFeature() {
      this.ChangeDisplayPropertyBox()
      this.AddFeatureGeoModel.AddFeatureClick.remove()
    }
  },
  created() {
    const map = new Map({
      basemap: 'osm-streets'
    })

    const mapview = new MapView({
      map: map,
      center: [116.8, 36.55],
      zoom: 5
    })

    const VoluntaryActivityPointSymbol = new PictureMarkerSymbol({
      url: 'https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png',
      width: '26px',
      height: '26px'
    })

    const VoluntaryActivityPointRenderer = new SimpleRenderer({
      symbol: VoluntaryActivityPointSymbol
    })

    const voluntaryActivityPopupTemplate = new PopupTemplate({
      title: '志愿活动详情',
      content: () => {
        return `
        <div class="esri-feature__fields esri-feature__content-element">
        <table class="esri-widget__table" summary="属性和值列表">
          <tbody>
            <tr>
              <th class="esri-feature__field-header">组织者名称</th>
              <td class="esri-feature__field-data">{OrganizationName}</td>
            </tr>
            <tr>
              <th class="esri-feature__field-header">志愿名称</th>
              <td class="esri-feature__field-data">{VoluntaryName}</td>
            </tr>
          </tbody>
        </table>
      </div>
        `
      }
    })

    const featurelayer = new FeatureLayer({
      url: 'https://services8.arcgis.com/CmXfu09loK81if9H/arcgis/rest/services/VoluntaryActivityPoint/FeatureServer/0',
      outFields: ['*'],
      popupTemplate: voluntaryActivityPopupTemplate,
      renderer: VoluntaryActivityPointRenderer
    })
    map.layers.add(featurelayer)

    this.DMapView = mapview
    this.Featurelayer = featurelayer
  },
  mounted() {
    this.DMapView.container = 'mapDiv'
    this.DMapView.ui.add('addFeature', 'top-right')
    this.DMapView.ui.add('propertyBox', 'bottom-left')
  }
}
</script>

<style lang="less" scoped>
#container {
  height: 100%;
  width: 100%;
  #mapDiv {
    width: 100%;
    height: 100%;
  }
}
</style>